<template>
  <div>
    <div class="app-container">

      <div class="filter-container">

        <div class="filter-item">
          <span>姓名：</span>
          <el-input  v-model="query.name" placeholder="姓名" style="width: 200px;margin-right: 5px;" ></el-input>
        </div>
        <div class="filter-item">
          <span>电话：</span>
          <el-input  v-model="query.phone" placeholder="电话"  style="width: 200px;margin-right: 5px;" ></el-input>
        </div>
        <div class="filter-item">
          <span>微信：</span>
          <el-input  v-model="query.wx" placeholder="微信"  style="width: 200px;margin-right: 5px;" ></el-input>
        </div>
        <div class="filter-item">
          <span>咨询日期：</span>
          <el-date-picker
            v-model="query.createdAt" value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期时间"
            end-placeholder="结束日期时间">
          </el-date-picker>
        </div>

      <!--<el-select filterable v-model="query.status" style="width: 200px;margin-right: 5px;" class="filter-item">
        <el-option v-for="item in  mapStatus" :key="item.value" :label="item.label " :value="item.value" />
      </el-select>-->

        <!--<el-date-picker class="filter-item"
          v-model="query.updatedAt" value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          range-separator="至"
          start-placeholder="修改日期时间"
          end-placeholder="修改日期时间">
        </el-date-picker>-->

      <br/>
      <el-button style="margin-left: 5px" @click="getRecords" type="primary" class="filter-item">查询</el-button>
        <el-button @click="reload" type="danger" class="filter-item">重置</el-button>
        <el-button @click="download" type="primary" class="filter-item">导出</el-button>

        <!--<el-button @click="handleDelete" type="primary" class="filter-item">批量删除</el-button>-->
      <!--<el-button @click="handleStatus(null,undefined,2)" type="primary" class="filter-item">批量下架</el-button>-->
      </div>

      <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      @selection-change="handleSelectionChange"
    >
    <el-table-column type="selection" width="55" />
    <el-table-column prop="id" label="ID" width="80" />
    <el-table-column prop="name" label="姓名" min-width="100" />
    <!--<el-table-column prop="gender" label="性别" width="50" >
      <template slot-scope="scope">
        <span>{{scope.row.gender==1?'男':'女'}}</span>
      </template>
    </el-table-column>-->
        <el-table-column prop="phone" label="电话" min-width="120" />
        <el-table-column prop="wx" label="微信" min-width="100" />
        <!--<el-table-column prop="cover_url" label="教师图片" width="100" >
          <template slot-scope="scope">
            <img v-if="scope.row.pic_url" class="table-img" :src="scope.row.pic_url">
          </template>
        </el-table-column>-->
    <!--<el-table-column show-overflow-tooltip prop="content" label="教师简介" width="300" />-->
    <!--<el-table-column prop="get_guard_user.name" label="发布人" width="100" />
    <el-table-column label="上架/下架" width="100px" >
      <template slot-scope="scope">
        <span>{{scope.row.status==1?"上架":"下架"}}</span>
      </template>
    </el-table-column>-->
    <!--<el-table-column prop="sort" label="排序" width="80" >
      <template slot-scope="scope">
        <el-input @input="changeSwitch(scope.row)"  v-model="scope.row.sort" placeholder="请输入序号"></el-input>
      </template>
    </el-table-column>-->
    <el-table-column prop="created_at" label="资讯时间" min-width="160" />
    <!--<el-table-column fixed="right" label="操作" min-width="150">
      <template slot-scope="scope">
				<el-button size="mini" type="text" @click="handleEdit(scope.$index, scope.row)">查看</el-button>
        <el-button size="mini" type="text" @click="handleDelete(scope.$index, scope.row)">通知面试</el-button>
			</template>
    </el-table-column>-->
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.page"
      :page-sizes="[5,10, 20, 100, 200]"
      :page-size="pagination.pageSize"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total">
    </el-pagination>

    </div>
  </div>
</template>

<script>

import { myGet, myPost } from '@/utils/myRequest'
import {exportXls} from "@/utils/myUtils";
const urlChange = '/guard/student/change'
const urlAdd = '/guard/student/add'
const urlLst = '/guard/student/askLst'
const urlDel = '/guard/student/del'
const urlDownload = '/guard/student/askDownload';
export default {


  data() {
    return {
      host:process.env.VUE_APP_HOST,
      listLoading:false,
      countries:[],
      list:[],
      selectId:[],

      mapStatus:[{value:0,label:'全部'}],
      query:{
        name:"",
        phone:"",
        wx:"",
        createdAt:[],
      },
      pagination:{
        page:1,
        pageSize:10,
        total:0,
      }
    }
  },
  methods: {

    download(){
      const url = urlDownload
      console.log(url)
      exportXls(url)
    },

    reload(){
      Object.assign(this.$data.query,this.$options.data().query)
      //Object.assign(this.$data.pagination,this.$options.data().pagination)
      //this.getRecords()
    },
    getRecords(){
      this.listLoading = true
      let params = Object.assign(this.query,this.pagination)
      myGet(urlLst,params).then(res=>{
        this.listLoading = false
        if(res.status){
          this.list = res.data.records
          this.mapStatus = res.data.map_status
          this.pagination.total = res.data.total
        }
      })
    },
    handleEdit(index,row){
      let id = row.id
      this.$router.push(`/detailStudent/${id}`)
    },

    handleDelete(index,row){
      this.$confirm('确定要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ids = [];
        if(typeof(row) == "undefined" ){
          ids = this.selectId
        }else{
          ids = [row.id]
        }
        myGet(urlDel,{ids}).then(res=>{
          if(res.status){
            this.$message.success(res.msg)
            this.getRecords()
          }
        })
      });
    },
    handleStatus(index,row,status){
      let tip = status==1?'确定要上架吗?':'确定要下架吗?';
      this.$confirm(tip, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        let id = [];
        if(typeof(row) == "undefined" ){
          id = this.selectId
        }else{
          id = [row.id]
        }

        myPost(urlChange, {
          //is_top:row.is_top,
          //up_down:row.up_down,
          status:status,
          id:id,
        }).then(res => {
          if(res.status){
            this.$message.success(res.msg)
            this.getRecords();
          }
        })
      });
    },
    handleTop(index,row,is_top){
      let tip = is_top==1?'确定要置顶吗?':'确定要取消置顶吗?';
      this.$confirm(tip, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        myPost(urlChange, {
          //is_top:row.is_top,
          //up_down:row.up_down,
          is_top:is_top,
          id:row.id,
        }).then(res => {
          if(res.status){
            this.$message.success(res.msg)
            this.getRecords();
          }
        })
      });
    },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.selectId = [];
      val.forEach(item=>{
        this.selectId.push(item.id)
      })
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.pagination.page = 1
      this.getRecords()
    },
    handleCurrentChange(val) {
      this.pagination.page  = val
      this.getRecords();
    },
  },

  mounted() {
    this.getRecords()
  },
}
</script>

<style scoped>
  .table-img{
    width: 50px;
    height: 50px;
}
</style>
